<template>
  <div>
    <sticky :className="'sub-navbar '+ 'draft'">
      <el-button  style="margin-left: 10px;" type="success" 
        @click="handleCommand({type:'sent_to_manager', data: desc_info})" 
        v-if="checkOperable(desc_info.cv_status, 'sent_to_manager') && (selfOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >推荐给客户经理</el-button>
      <el-button  style="margin-left: 10px;" type="success" 
        @click="handleCommand({type:'sent_to_client', data: desc_info})"
        v-if="checkOperable(desc_info.cv_status, 'sent_to_client') && (clientManagerOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >推荐给客户</el-button>
      <el-button style="margin-left: 10px;" type="success" 
        @click="handleCommand({type:'interview', data: desc_info})"
         v-if="checkOperable(desc_info.cv_status, 'interview') && (selfOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >面试</el-button>

      <el-button  style="margin-left: 10px;" type="success"
        @click="handleCommand({type:'interview_end', data: desc_info})"
        v-if="checkOperable(desc_info.cv_status, 'interview_end') && (selfOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >终面</el-button>
      <el-button style="margin-left: 10px;" type="success"
        @click="handleCommand({type:'sign_offer', data: desc_info})"
        v-if="checkOperable(desc_info.cv_status, 'sign_offer') && (selfOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >签订Offer</el-button>
      <el-button style="margin-left: 10px;" type="success"
        @click="handleCommand({type:'onboading', data: desc_info})"
        v-if="checkOperable(desc_info.cv_status, 'onboading') && (selfOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >入职</el-button>

      <el-button style="margin-left: 10px;" type="success"
        @click="handleCommand({type:'over', data: desc_info})"
        v-if="checkOperable(desc_info.cv_status, 'sent_over') && (selfOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >过保证期</el-button>

      <el-button style="margin-left: 10px;" type="success"
        @click="handleCommand({type:'out', data: desc_info})"
        v-if="checkOperable(desc_info.cv_status, 'out') && (selfOperable(desc_info) || clientManagerOperable(desc_info) || hasRoles(['SUPER_ADMIN']))"
        >淘汰</el-button>
      
    </sticky>
    <div class="cv-container" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">推荐介绍</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>项目名称：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.project && desc_info.project.project_name " class='content'>{{desc_info.project.project_name}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>公司名称：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.project && desc_info.project.company_name" class='content'>{{desc_info.project.company_name}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>候选人：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.candidate_name" class='content'>{{desc_info.candidate_name}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>推荐状态：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.cv_status " class='content'>
              <el-tag>{{desc_info.cv_status | cvStatusValFilter }}<span v-if="desc_info.cv_status === 'interview' && desc_info.interview_num" >: 第{{ desc_info.interview_num}}轮</span></el-tag>
            </div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>推荐人：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.create_name" class='content'>{{desc_info.create_name}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>推荐日期：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.create_date" class='content'>{{desc_info.create_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
      </el-card> 
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">推荐报告</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>整体年薪：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.total_annual_salary " class='content'>{{desc_info.report.total_annual_salary}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>薪资构成：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.salary_structure " class='content'>{{desc_info.report.salary_structure}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>期望薪资：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.expected_salary " class='content'>{{desc_info.report.expected_salary}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>优势劣势：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.self_desc " class='content'>{{desc_info.report.self_desc}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>性格特点：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.character_desc " class='content'>{{desc_info.report.character_desc}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>职业意向：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.career_intention " class='content'>{{desc_info.report.career_intention}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>期望面试时间：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.expected_interview_time " class='content'>{{desc_info.report.expected_interview_time}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>预计到岗时间：</div></el-col>
          <el-col :span="20">
            <div v-if="desc_info.report &&  desc_info.report.expected_arrival_time " class='content'>{{desc_info.report.expected_arrival_time}}</div>
            <div v-else class='content'>未填</div>
          </el-col>
        </el-row>
      </el-card>  
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">基本信息</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>候选人：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.candidate_name ? desc_info.candidate_name : '未填'}}</div>
          </el-col>
          <el-col :span="4"><div class='label'>性别:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.gender | genderFilter }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>出生年月：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.birthday_date | timeFilter('{y}-{m}')  }}</div>
            <!-- | timeFilter('{y}-{m}-{d} {h}:{i}') -->
          </el-col>
          <el-col :span="4"><div class='label'>婚育:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.marriage | marriageFilter }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>户籍：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.residence | cityValFilter  }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>所在城市:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.city | cityValFilter }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>手机：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{ desc_info.mobile_phone ? desc_info.mobile_phone : "未填" }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>邮箱:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.email ? desc_info.email : "未填"  }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>QQ：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{ desc_info.qq ? desc_info.qq : "未填" }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>微信:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.weixin ? desc_info.weixin : "未填"  }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>最高学历：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{ desc_info.highest_diploma | educationBackgroudFilter }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>毕业年月:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.graduation_date |  timeFilter('{y}-{m}') }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>语言能力：</div></el-col>
          <el-col :span="8">
            <div v-if="language_level_group" class='content'>
              <span v-for="(item, index) in language_level_group" :key="item" >
                {{ item | languageLevelFilter }}<span v-if="(index+1) !== language_level_group.length">,</span>
              </span> 
            </div>
          </el-col>
          <el-col :span="4"><div class='label'>意向城市:</div></el-col>
          <el-col :span="8">
            <div v-if="preferred_city_group" class='content'>
              <span v-for="(item, index) in preferred_city_group" :key="item" >
                {{ item | cityValFilter }}<span v-if="(index+1) !== preferred_city_group.length">,</span>
              </span> 
            </div>
          </el-col>
        </el-row> 
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>当前公司：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{ desc_info.company_name }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>当前部门:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.dept_name }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>当前职位：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{ desc_info.position }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>当前年薪:</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.annual_salary }}</div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">教育经历</span>
        </div>
        <span v-if="desc_info.education_items" v-for="(item, index) in desc_info.education_items" :key="item.id">
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>学校：</div></el-col>
            <el-col :span="8">
              <div  class='content'>{{ item.school }}</div>
            </el-col>
            <el-col :span="4"><div class='label'>时间：</div></el-col>
            <el-col :span="8">
              <div  class='content'>从 {{ item.start_date |  timeFilter('{y}-{m}') }} 到 {{ item.end_date |  timeFilter('{y}-{m}') }}</div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>学位：</div></el-col>
            <el-col :span="8">
              <div  class='content'>{{ item.diploma | educationBackgroudFilter}}</div>
            </el-col>
            <el-col :span="4"><div class='label'>专业：</div></el-col>
            <el-col :span="8">
              <div  class='content'>从 {{ item.major}}</div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>统招：</div></el-col>
            <el-col :span="8">
              <div  class='content'>{{ (item.is_unified && item.is_unified === '1') ? '是' : '否' }}</div>
            </el-col>
          </el-row>
          <hr v-if="(index + 1) !== desc_info.education_items.length" style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
        </span> 
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">技能证书</span>
        </div>
        <span  v-for="(item, index) in skill_certificate_group" :key="item">
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>证书{{index + 1}}：</div></el-col>
            <el-col :span="20">
              <div  class='content'>{{ item }}</div>
            </el-col>
          </el-row>
        </span>
      </el-card>  
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">工作经历</span>
        </div>
        <span v-if="desc_info.experience_items" v-for="(item, index) in desc_info.experience_items" :key="item.id">
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>时间：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                <span> 从 {{item.start_date | timeFilter('{y}-{m}')}}</span>
                <span> 到 </span>
                <span v-if="item.is_current && item.is_current ==='1'" >
                至今
                </span>
                <span v-else> {{item.end_date | timeFilter('{y}-{m}')}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>公司：</div></el-col>
            <el-col :span="20">
              <div  class='content'>{{item.company_name}}</div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>部门：</div></el-col>
            <el-col :span="8">
              <div  class='content'>{{ item.dept_name ? item.dept_name: '未填' }}</div>
            </el-col>
            <el-col :span="4"><div class='label'>职位：</div></el-col>
            <el-col :span="8">
              <div  class='content'>{{ item.position ? item.position: '未填'  }}</div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>汇报对象：</div></el-col>
            <el-col :span="8">
              <div  class='content'>{{ item.leader ? item.leader: '未填' }}</div>
            </el-col>
            <el-col :span="4"><div class='label'>下属人数：</div></el-col>
            <el-col :span="8">
              <div  class='content'>{{ item.subordinates_num ? item.subordinates_num: '未填'  }}</div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>工作内容：</div></el-col>
            <el-col :span="20">
              <div  class='content'>{{ item.subordinates_num ? item.subordinates_num: '未填' }}</div>
            </el-col>
          </el-row>    
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>工作业绩：</div></el-col>
            <el-col :span="20">
              <div  class='content'>{{ item.work_performance ? item.work_performance: '未填'  }}</div>
            </el-col>
          </el-row> 
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>离职原因：</div></el-col>
            <el-col :span="20">
              <div  class='content'>{{ item.off_reason ? item.off_reason: '未填'  }}</div>
            </el-col>
          </el-row> 
          <hr v-if="(index + 1) !== desc_info.experience_items.length" style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
        </span> 
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">项目经验</span>
        </div>
        <span v-if="desc_info.product_items" v-for="(item, index) in desc_info.product_items" :key="item.id">
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>时间：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                <span> 从 {{item.start_date | timeFilter('{y}-{m}')}}</span>
                <span> 到 </span>
                <span v-if="item.is_current && item.is_current ==='1'" >
                至今
                </span>
                <span v-else> {{item.end_date | timeFilter('{y}-{m}')}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>所在公司：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                {{ item.company_name ? item.company_name : '未填'}}
              </div>
            </el-col>
          </el-row>   
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>项目名称：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                {{ item.product_name ? item.product_name : '未填'}}
              </div>
            </el-col>
          </el-row> 
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>项目简介：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                {{ item.product_desc ? item.product_desc : '未填'}}
              </div>
            </el-col>
          </el-row> 
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>项目职务：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                {{ item.product_position ? item.product_position : '未填'}}
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>项目职责：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                {{ item.product_function ? item.product_function : '未填'}}
              </div>
            </el-col>
          </el-row> 
          <el-row type="flex" justify='space-start' :gutter="10"> 
            <el-col :span="4"><div class='label'>项目业绩：</div></el-col>
            <el-col :span="20">
              <div  class='content'>
                {{ item.product_achievement ? item.product_achievement : '未填'}}
              </div>
            </el-col>
          </el-row>     
          <hr v-if="(index + 1) !== desc_info.product_items.length" style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
        </span>  
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">自我介绍</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="2"><div class='label'></div></el-col>
          <el-col :span="22">
            <div  class='content'>{{ desc_info.self_introduction ? desc_info.self_introduction : '未填' }}</div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">培训经历</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="2"><div class='label'></div></el-col>
          <el-col :span="22">
            <div  class='content'>{{ desc_info.training_experience ? desc_info.training_experience : '未填' }}</div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <el-dialog title="安排面试" :visible.sync="dialogInterviewVisible" append-to-body>
      <el-form  :rules="interview_rules" ref="interviewForm" :model="interview_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="候选人" prop="name">
          <span> {{interview_temp.candidate_name}}</span>
        </el-form-item>
        <el-form-item label="面试时间" prop="interview_date">
          <el-date-picker v-model="interview_temp.interview_date" type="datetime" placeholder="选择时间" value-format="timestamp" >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="4" size="small" v-model="interview_temp.remark" style="width: 480px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInterviewVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="saveInterview()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="终面" :visible.sync="dialogInterviewEndVisible" append-to-body>
      <el-form  :rules="interview_end_rules" :model="interview_end_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="候选人" prop="name">
          <span> {{interview_end_temp.candidate_name}}</span>
        </el-form-item>
        <el-form-item label="面试时间" prop="interview_date">
          <el-date-picker v-model="interview_end_temp.interview_date" type="datetime" placeholder="选择时间" value-format="timestamp" >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="4" size="small" v-model="interview_end_temp.remark" style="width: 480px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInterviewEndVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="saveInterviewEnd()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="面试反馈" :visible.sync="dialogFeedbackVisible" append-to-body>
      <el-form  :rules="rules" ref="feedbackForm" :model="interview_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="候选人" prop="name">
          <span> {{this.current_cv.candidate_name}}</span>
        </el-form-item>
        <el-form-item label="面试" prop="name">
          <el-tag>
            {{ this.current_cv.cv_status | cvStatusValFilter }}
            <span v-if="this.current_cv.cv_status === 'interview' && this.current_cv.interview_num" >: 第{{ this.current_cv.interview_num }}轮</span>
          </el-tag>
        </el-form-item>
        <el-form-item label="反馈" prop="remark">
          <el-input type="textarea" :rows="4" size="small" v-model="interview_temp.feedback" style="width: 480px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFeedbackVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="saveFeedback()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="签订Offer" :visible.sync="dialogSignOfferVisible" append-to-body>
      <el-form  :rules="rules" ref="offerForm" :model="offer_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="候选人" prop="name">
          <span> {{offer_temp.candidate_name}}</span>
        </el-form-item>
        <el-form-item label="年薪" prop="annual_salary">
          <el-input size="small" v-model="offer_temp.annual_salary" style="width: 480px;"></el-input>
        </el-form-item>
        <el-form-item label="公司收费" prop="company_fees">
          <el-input size="small" v-model="offer_temp.company_fees" style="width: 480px;"></el-input>
        </el-form-item>
        <el-form-item label="签订时间" prop="company_fees">
          <el-date-picker
                v-model="offer_temp.sign_date"
                type="date"
                format="yyyy-MM-dd" value-format="timestamp"
                style="width: 200px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到岗时间" prop="remark">
          <el-date-picker
                v-model="offer_temp.board_date"
                type="date"
                format="yyyy-MM-dd" value-format="timestamp"
                style="width: 200px;">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSignOfferVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="saveOffer()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="入职" :visible.sync="dialogBoadVisible" append-to-body>
      <el-form  :rules="rules" ref="boadForm" :model="boad_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="候选人" prop="name">
          <span> {{boad_temp.candidate_name}}</span>
        </el-form-item>
        <el-form-item label="到岗时间" prop="remark">
          <el-date-picker
                v-model="boad_temp.board_date"
                type="date"
                format="yyyy-MM-dd" value-format="timestamp"
                style="width: 200px;">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBoadVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="saveBoad()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="淘汰" :visible.sync="dialogOutVisible" append-to-body>
      <el-form  :rules="rules" ref="outForm" :model="out_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="候选人" prop="name">
          <span> {{out_temp.candidate_name}}</span>
        </el-form-item>
        <el-form-item label="反馈" prop="remark">
          <el-input type="textarea" :rows="4" size="small" v-model="out_temp.feedback" style="width: 280px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOutVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="saveOut()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import API from '@/utils/backend_api'
import Sticky from '@/components/Sticky'
import Static_Data from '@/data/index'
export default {
  name: 'cvTodo',
  components: { Sticky },
  data() {
    return {
      id: '',
      language_level_group: [],
      skill_certificate_group: [],
      preferred_city_group: [],
      desc_info: {},
      current_user_id: this.$store.getters.userId,
      current_user_roles: this.$store.getters.roles,
      statusOptions: Static_Data.cv_status,
      userOptions: this.$store.getters.usersList,
      report_dialog: {
        id: '',
        visible: false
      },
      isDisplay: false,
      dialogInterviewVisible: false,
      dialogInterviewEndVisible: false,
      dialogFeedbackVisible: false,
      dialogSignOfferVisible: false,
      dialogBoadVisible: false,
      dialogOutVisible: false,
      action: '',
      tableKey: 0,
      rules: {
      },
      interview_rules: {
      },
      interview_end_rules: {
      },
      current_cv: {},
      interview_temp: {
        candidate_name: '',
        interview_date: '',
        feedback: '',
        remark: ''
      },
      interview_end_temp: {
        candidate_name: '',
        interview_date: '',
        feedback: '',
        remark: ''
      },
      offer_temp: {
        candidate_name: '',
        annual_salary: '',
        board_date: '',
        sign_date: '',
        company_fees: ''
      },
      boad_temp: {
        candidate_name: '',
        board_date: ''
      },
      out_temp: {
        candidate_name: '',
        feedback: ''
      }
    }
  },
  created() {
    const params = this.$route.params
    if (params.id) {
      this.id = params.id
      this.current_cv.id = params.id
      API.cv.get(this.id).then(response => {
        this.desc_info = response.data
        if (this.desc_info.language_level_group) {
          this.language_level_group = JSON.parse(this.desc_info.language_level_group)
        }
        if (this.desc_info.skill_certificate_group) {
          this.skill_certificate_group = JSON.parse(this.desc_info.skill_certificate_group)
        }
        if (this.desc_info.preferred_city_group) {
          this.preferred_city_group = JSON.parse(this.desc_info.preferred_city_group)
        }
      })
    } else {
      this.$message.error('推荐id不存在')
      return
    }
  },
  methods: {
    selfOperable(data) {
      return data.create_id && this.current_user_id === data.create_id
    },
    clientManagerOperable(data) {
      return data.business_roles && data.business_roles.some((item) => (item === 'client_manager'))
      // return ((data.bd && this.current_user_id === data.bd.id) || (data.create_id && this.current_user_id === data.create_id))
    },
    hasRoles(roles) {
      return this.current_user_roles.some(item => roles.indexOf(item) >= 0)
    },
    handleCommand(val) {
      if (val.type && val.data && val.type === 'sent_to_manager') {
        this.action = 'sent_to_manager'
        this.sentToManager(val.data)
      }
      if (val.type && val.data && val.type === 'sent_to_client') {
        this.action = 'sent_to_client'
        this.sentToClient(val.data)
      }
      if (val.type && val.data && val.type === 'interview') {
        this.action = 'interview'
        this.handleInterview(val.data)
      }
      if (val.type && val.data && val.type === 'interview_end') {
        this.action = 'interview_end'
        this.handleInterviewEnd(val.data)
      }
      if (val.type && val.data && val.type === 'sign_offer') {
        this.action = 'sign_offer'
        this.handleOffer(val.data)
      }
      if (val.type && val.data && val.type === 'onboading') {
        this.action = 'onboading'
        this.handleBoad(val.data)
      }
      if (val.type && val.data && val.type === 'over') {
        this.action = 'over'
        this.handleSentOver(val.data)
      }
      if (val.type && val.data && val.type === 'out') {
        this.action = 'out'
        this.handleOut(val.data)
      }
    },
    checkOperable(status, next_status) {
      if (status && next_status) {
        let next_status_group = []
        this.statusOptions.map(item => {
          if (item.key === status) {
            next_status_group = item.next_status_group
          }
        })
        if (next_status_group.indexOf(next_status) < 0) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
    getName: function(id) {
      let username = ''
      this.userOptions.map(item => {
        if (item.id === id) {
          username = item.username
          return username
        }
      })
      return username
    },
    handleInterview(data) {
      this.interview_temp.candidate_name = data.candidate_name
      this.current_cv = data
      API.cv.getOpIshandle(this.current_cv.id).then(response => {
        console.log(response.data)
        if (response.data) {
          this.dialogInterviewVisible = true
        } else {
          this.dialogFeedbackVisible = true
        }
      })
    },
    handleInterviewEnd(data) {
      this.interview_end_temp.candidate_name = data.candidate_name
      this.current_cv = data
      API.cv.getOpIshandle(this.current_cv.id).then(response => {
        console.log(response.data)
        if (response.data) {
          this.dialogInterviewEndVisible = true
        } else {
          this.dialogFeedbackVisible = true
        }
      })
    },
    saveInterviewEnd() {
      API.cv.interview_end(this.current_cv.id, this.interview_end_temp).then(response => {
        for (const v of this.list) {
          if (v.id === this.current_cv.id) {
            const index = this.list.indexOf(v)
            this.list.splice(index, 1, response.data)
            break
          }
        }
        this.resetTemp()
        this.dialogInterviewEndVisible = false
      })
    },
    saveFeedback() {
      API.cv.feedback(this.current_cv.id, this.interview_temp).then(response => {
        for (const v of this.list) {
          if (v.id === this.current_cv.id) {
            const index = this.list.indexOf(v)
            this.list.splice(index, 1, response.data)
            break
          }
        }
        if (this.action === 'interview') {
          this.dialogInterviewVisible = true
        }
        if (this.action === 'interview_end') {
          this.dialogInterviewEndVisible = true
        }
        if (this.action === 'sign_offer') {
          this.dialogSignOfferVisible = true
        }
        if (this.action === 'out') {
          this.dialogOutVisible = true
        }
        this.dialogFeedbackVisible = false
      })
    },
    saveInterview() {
      API.cv.interview(this.current_cv.id, this.interview_temp).then(response => {
        this.desc_info = response.data
        this.resetTemp()
        this.dialogInterviewVisible = false
      })
    },
    handleOffer(data) {
      this.offer_temp.candidate_name = data.candidate_name
      this.current_cv = data
      API.cv.getOpIshandle(this.current_cv.id).then(response => {
        console.log(response.data)
        if (response.data) {
          this.dialogSignOfferVisible = true
        } else {
          this.dialogFeedbackVisible = true
        }
      })
    },
    saveOffer() {
      API.cv.signoffer(this.current_cv.id, this.offer_temp).then(response => {
        this.desc_info = response.data
        this.resetTemp()
        this.dialogSignOfferVisible = false
      })
    },
    handleBoad(data) {
      this.boad_temp.candidate_name = data.candidate_name
      this.current_cv = data
      API.cv.getOffer(data.id).then(response => {
        if (response.data && response.data.board_date) {
          this.boad_temp.board_date = response.data.board_date
        }
        this.dialogBoadVisible = true
      })
    },
    saveBoad() {
      API.cv.onboading(this.current_cv.id, this.boad_temp).then(response => {
        this.desc_info = response.data
        this.resetTemp()
        this.dialogBoadVisible = false
      })
    },
    handleSentOver(data) {
      this.current_cv_status = data.cv_status
      this.current_cv = data
      this.$confirm(data.candidate_name + '确定已过保证期?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.cv.over(this.current_cv.id).then(response => {
          this.desc_info = response.data
          this.$message({
            type: 'success',
            message: '成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleOut(data) {
      this.out_temp.candidate_name = data.candidate_name
      this.current_cv = data
      API.cv.getOpIshandle(this.current_cv.id).then(response => {
        console.log(response.data)
        if (response.data) {
          this.dialogOutVisible = true
        } else {
          this.dialogFeedbackVisible = true
        }
      })
    },
    saveOut() {
      API.cv.out(this.current_cv.id, this.out_temp).then(response => {
        this.desc_info = response.data
        this.resetTemp()
        this.dialogOutVisible = false
      })
    },
    sentToManager(data) {
      this.current_cv = data
      API.cv.send_client_manager(this.current_cv.id).then(response => {
        this.desc_info = response.data
        this.resetTemp()
        this.$notify({
          title: '成功',
          message: '推荐成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    sentToClient(data) {
      this.current_cv = data
      API.cv.send_client(this.current_cv.id).then(response => {
        this.desc_info = response.data
        this.resetTemp()
        this.$notify({
          title: '成功',
          message: '推荐成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    resetTemp() {
      this.interview_temp = {
        candidate_name: '',
        interview_date: '',
        feedback: '',
        remark: ''
      }
      this.interview_end_temp = {
        candidate_name: '',
        interview_date: '',
        feedback: '',
        remark: ''
      }
      this.offer_temp = {
        candidate_name: '',
        annual_salary: '',
        board_date: '',
        sign_date: '',
        company_fees: ''
      }
      this.boad_temp = {
        candidate_name: '',
        board_date: ''
      }
      this.out_temp = {
        candidate_name: '',
        feedback: ''
      }
    }
  }
}
</script>
<style scoped>
  .cv-container{
    padding: 10px 20px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-col {
    margin: 2px 0 4px;
  }
  .el-card{
    margin: 2px 0 4px;
  }

  .label {
    text-align:right;
    color:#939393;
    font-weight:normal;
  }
</style>

